<template>
  <div class="wrapper" :class="type">
    <div class="title_da">转店达人 </div>
    <div class="title_xiao">资深转店经理人，多年转店经验，成功服务近21万商铺。 </div>
    <van-tabs>
        <van-tab v-for="(item, index) in list" :key="index">
            <div slot="title">
              <img :src="getImgUrl(item.img)">
            </div>
            <div class="wrappericon">
              <ul class="clearfix">
                <li v-for="(i, index) in item.list.slice(0,3)" :key="index">
                  <img :src="baseUrl + i.store_images">
                  <div class="infoR_info">
                    <div class="store_title hei">{{i.store_title}}</div>
                    <div class="store">行业：<span class="hei">{{i.store_category}}</span></div>
                    <div class="store">区域：<span>{{i.store_quyu}}</span></div>
                    <div class="store">建筑面积：<span class="hong">{{i.store_area}}㎡</span></div>
                    <div class="store">租金：<span class="hong">{{i.store_money}}元</span>/月</div>
                    <div class="store_zhuang"><span class="hong">{{i.store_move_money}}万</span><br>转让费</div>
                    <div class="store_cheng">{{i.out_days}}天转出</div>
                  </div>
                </li>
              </ul>
            </div>
        </van-tab>
    </van-tabs>
    <div class="experience" @click="is_show()">了解更多成功案例</div>
  </div>
</template>

<script>
import BnameInfo from '../../../assets/json/Bteamview.json'
export default {
  name: 'CompanyProblem',
  props: {
    type: String
  },
  data () {
    return {
      list: BnameInfo
    }
  },
  methods: {
    getImgUrl (img) {
      return require('../../../assets/img/team/' + img)
    },
    is_show () {
      this.$emit('is_show', true)
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
  width 100%
  border-radius 5px
  padding 0rem /* 26/50 */ .4rem 0rem /* 28/50 */ .4rem
  position relative
  margin-top 1.06rem /* 53/50 */
  .title_da
    font-size .7rem /* 35/50 */
    height 1.1rem /* 55/50 */
    line-height 1.1rem /* 55/50 */
    text-align center
    font-weight 800
    color rgba(0,0,0,.9)
  .title_xiao
    font-size .28rem /* 14/50 */
    text-align center
    color rgba(0,0,0,.7)
    line-height .46rem /* 23/50 */
  .van-tabs
    /deep/ .van-tabs__wrap
      height 2.3rem /* 115/50 */
      .van-tabs__nav
        background transparent
        .van-tab:nth-child(1)
          padding 0
        .van-tab
          padding 0 6px
          img
            width 1.5rem /* 75/50 */
            height 1.5rem /* 75/50 */
        .van-tabs__line
          width 30px
          border-width: 0 15px 15px;
          border-style: solid;
          background transparent
  .wrappericon
    width 100%
    height 10.8rem /* 540/50 */
    border-radius .1rem /* 5/50 */
    padding-top .06rem /* 3/50 */
    ul
      width 100%
      height 10.68rem /* 534/50 */
      background #ffffff
      border-radius .1rem /* 5/50 */
      margin-bottom .36rem /* 18/50 */
      padding .38rem .3rem /* 15/50 */
      position relative
      li
        height 2.7rem /* 135/50 */
        border-radius .1rem /* 5/50 */
        margin-bottom .44rem /* 22/50 */
        position relative
        z-index 10
        top 0px
        display flex
        img
          width 37%
          height 99%
          object-fit cover
          border-radius 5px 0 0 5px
          margin-right .2rem
        .infoR_info
          width 100%
          .store_title
            width 65%
            line-height .8rem
            font-weight bold
            font-size .3rem /* 15/50 */
            text-overflow -o-ellipsis-lastline
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 1
            line-clamp 1
            -webkit-box-orient vertical
          .store
            font-size .26rem /* 13/50 */
            color #999
            line-height .26rem /* 13/50 */
            margin-bottom .18rem /* 9/50 */
            span
              color #333
          .store_zhuang
            text-align center
            position absolute
            right .32rem /* 16/50 */
            bottom .3rem /* 15/50 */
            font-size .22rem /* 11/50 */
            color #666
            span
              font-size .3rem /* 15/50 */
              color #FF3000
          .store_cheng
            max-width 22%
            padding .18rem /* 9/50 */ .18rem
            position absolute
            top 0px
            line-height .24rem /* 12/50 */
            right 0rem /* 0/50 */
            border-radius 0px 5px 0px 5px
            font-size .24rem /* 12/50 */
            font-weight bold
            color #fff
            text-overflow -o-ellipsis-lastline
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-line-clamp 1
            line-clamp 1
            -webkit-box-orient vertical
      li:after
        width 100%
        height 2.7rem /* 135/50 */
        content ""
        position absolute
        bottom 2px
        left 0
        right 0
        z-index -1
        border-radius .1rem /* 5/50 */
        background #F8F8F8
  .experience
    width 84%
    position absolute
    left 8%
    bottom -.2rem /* 0/50 */
    height .9rem /* 45/50 */
    line-height .9rem
    text-align center
    border-radius .1rem /* 5/50 */
    font-size .4rem /* 20/50 */
    font-weight bold
    color #fff
.one
  .wrappericon
    background #D77D50
    li
      background rgb(235 202 184)
  .experience
    background #B9480A
    border 2px solid #AD4309
    box-shadow 0px 3px 0px 0px rgba(126, 47, 4, 0.3)
  /deep/ .van-tabs__line
    border-color transparent transparent #EC8756
  .store_cheng
    background #B9480A
.two
  .wrappericon
    background #E66D71
    li
      background rgb(237 180 182)
  .experience
    background #C3080E
    border 2px solid #B4070B
    box-shadow 0px 3px 0px 0px rgba(167, 5, 9, 0.3)
  /deep/ .van-tabs__line
    border-color transparent transparent #E66D71
  .store_cheng
    background #C3080E
.there
  .wrappericon
    background #7AA1F1
    li
      background rgb(180 205 223)
  .experience
    background #085B95
    border 2px solid #095194
    box-shadow 0px 3px 0px 0px rgba(93, 162, 223, 0.5)
  /deep/ .van-tabs__line
    border-color transparent transparent #7AA1F1
  .store_cheng
    background #085B95
</style>
